<template>
  <div class="topics">
    <div class="scroll-wrapper">
      <v-scroll ref="scroll" @loadMore="loadMore" @reFresh="refresh"
                v-if="data.length"
                :data="data"
                :probe-type="probeType"
                :listen-scroll="listenScroll"
                :pullup=true
                :pulldown=true
                :scrolltop=true>
        <div class="item-list">
          <v-topics-item :data="data"></v-topics-item>
        </div>
      </v-scroll>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from 'base/scroll/scroll'
  import TopicsItem from 'components/topics-item/topics-item'

  export default {
    name: 'topics-list',
    props: {
      data: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        tab: {
          'share': '分享',
          'ask': '问答',
          'job': '招聘',
          'dev': '客户端'
        }
      }
    },
    created() {
      this.probeType = 2
      this.listenScroll = true
    },
    mounted() {
      this.$nextTick(() => {
        if (this.$refs.scroll) {
          this.$refs.scroll.refresh()
        }
      })
    },
    methods: {
      // 上拉到底部加载更多
      loadMore() {
        this.$emit('scrollMore')
      },
      loadMoreOver() {
        this.$refs.scroll.loadMoreOver()
      },
      // 下拉刷新
      refresh() {
        this.$emit('refresh')
      },
      refreshOver(status) {
        this.$refs.scroll.refreshOver(status)
      },
      scrollToTop(time) {
        this.$refs.scroll.scrollToTop(time)
      }
    },
    watch: {
      data() {
        // 此处用$nextTick等DOM渲染完成 定时重新计算滚动组件
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.scroll.refresh()
          }, 200)
        })
      }
    },
    components: {
      'v-scroll': Scroll,
      'v-topics-item': TopicsItem
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";
  @import "~common/scss/mixin";

  .topics {
    .scroll-wrapper {
      position: absolute;
      background-color: #eff2f7;
      top: 100px;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      .item-list {
        padding: 5px;
        box-sizing: border-box;
      }
    }
  }
</style>
